<template>
	<div id="money_part_container">
		<div id="member_tag">
			<div v-if="userInfo.level == 0" class="normal">普通会员</div>
			<div v-else class="vip">创享会员</div>
		</div>
		<p id="earn_title">{{thisMonth}}月总积分</p>
		<p id="earn_money">{{moneyData.month_total}}</p>
		<pre>{{moneyData}}</pre>
		<div id="earn_detail">
			<div>
				<p>签到积分</p>
				<p>{{moneyData.point1}}</p>
			</div>
			<div>
				<p>购物积分</p>
				<p>{{moneyData.point3}}</p>
			</div>
			<div>
				<p>提现积分</p>
				<p>{{moneyData.point2}}</p>
			</div>
		</div>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default{
	name:'MoneyPart',
	created(){
	},
	computed:{
		...mapGetters({
			moneyData: 'moneyData',
			thisMonth: 'thisMonth',
			userInfo: 'user/userInfo'
		})
	},
	methods:{
	}
}
</script>
<style lang='less' scoped>
#money_part_container{
	position: relative;
	padding: 1rem 0 .1rem;
	background: linear-gradient(0deg, #fb4a4a 0%, #fb794a 99%);
	color: #fff;
	text-align: center;
}
#member_tag{
	position: absolute;
	left: 1rem;
	top: .8rem;
	width: 1.43rem;
	height: 1.07rem;
	div{
		padding-top: .95rem;
		background-repeat: no-repeat;
		background-position: top center;
		font-size: .34rem;
	}
	.normal{
		background-image: url(../../assets/img/user/member.png);
	}
	.vip{
		background-image: url(../../assets/img/user/member2.png);
	}
}
#earn_title{
	font-size: .48rem
}
#earn_money{
	font-size: .88rem;
	margin-top: .3rem;
}
#earn_detail{
	width: 8.8rem;
    overflow: hidden;
    margin: .5rem auto;
    div{
    	float: left;
    	width: 33%;
    	font-size: .34rem;
    }
}
</style>
